<link rel='import' href='../../bower/polymer/polymer.html'>
<link rel='import' href='button.html'>
<link rel='import' href='../../bower/paper-progress/paper-progress.html'>
<link rel='import' href='dialog.html'>

<polymer-element name='uproxy-reconnect'>
  <template>
    <style>
    :host {
      text-align: center;
      font-color: #12A391;  /* dark green */
    }
    uproxy-button {
      margin: 10px 2px 3px 2px;
      font-size: 12px;
    }
    uproxy-dialog {
      top: 20%;
      min-width: 305px;
      z-index: 1002; /* Must be greater than core-overlay-backdrop */
    }
    paper-progress {
      margin-bottom: 1em;
    }
    </style>

    <uproxy-dialog backdrop opened='{{ model.reconnecting }}'
        layered='false' id='reconnectDialog' autoCloseDisabled='true'>
      <div>
        <p>{{ "ATTEMPTING_RECONNECT" | $$(model.globalSettings.language) }}</p>
        <paper-progress indeterminate='true'></paper-progress>
        <uproxy-button on-tap='{{ logout }}'>{{ "LOGOUT" | $$(model.globalSettings.language) }}</uproxy-button>
      </div>
    </uproxy-dialog>

  </template>
  <script src='reconnect.js'></script>
</polymer-element>
